import React, {useState} from 'react';
import {Collapse} from "antd";
import {Image, ImageViewer, Tabs} from 'antd-mobile'
import s from "./help.module.less"
import helpImg from "./help.jpg"
import jianying from "./jianying.mp4"
import xingtu from "./xingtu.mp4"

const items = [
    {
        key: '1',
        label: '人工客服上班时间',
        children: <p>早上9点-晚上12点</p>,
    },
    {
        key: '2',
        label: '付款可以立即使用吗？',
        children: <p>付款立即使用，非充值自己手机号，拍下后仔细观看教程即可！</p>,
    },
    {
        key: '3',
        label: '验证码不出现',
        children: <p>是醒图点击获取验证码， 再返回我的网页查看验证码， 耐心等待30-50S 不要一直在网页等验证码呢亲亲。</p>,
    },
    {
        key: '4',
        label: '没有其他手机号登录',
        children: <p>没有其他手机号，请点击手机号登录。复制网址上的手机号到醒图即可。亲亲</p>,
    },
    {
        key: '5',
        label: '如何退出自己的醒图账号',
        children: <p>
            <p>退出之前账号操作如下</p>
            <ol>
                <li>点击修图</li>
                <li>耐心寻找左上角</li>
                <li>左上角3条横杠点击退出登录</li>
            </ol>
        </p>,
    },
    {
        key: '6',
        label: '会掉线吗？',
        children: <p>非直充账号，因官方限制都会掉线，我们卖的不仅仅是产品，更是售后服务哦！</p>,
    },
    {
        key: '7',
        label: '掉线怎么办？',
        children: <p>亲亲，掉线后请不要着急，直接用卡号重新获取账号即可，自助登录即可哟，保存好卡号跟网址，方便下次使用。</p>,
    },
    {
        key: '8',
        label: '无法打开链接？',
        children: <p>请刷新浏览器，或者复制网址到其他浏览器打开即可，登录过程中遇到任何问题，请联系客服哦。</p>,
    },
];
function Help() {
    const [visible , setVisible] = useState(false)
    return (
        <div className={s.wrap}>
            {/*<Tabs>*/}
            {/*    <Tabs.Tab title='图文教程' key='fruits'>*/}
            {/*        <div className={s.imgWrap}>*/}
            {/*            <Image*/}
            {/*                src={helpImg}*/}
            {/*                onClick={()=>{*/}
            {/*                    setVisible(true)*/}
            {/*                }}*/}
            {/*            />*/}
            {/*        </div>*/}
            {/*        <div className={s.columnGap20}>*/}
            {/*            <p>*/}
            {/*                ➡️打开连接，复制发货信息的卡号，*/}
            {/*            </p>*/}
            {/*            <p>*/}
            {/*                ➡️输入卡号后登录，*/}
            {/*            </p>*/}
            {/*            <p>*/}
            {/*                ➡️复制手机号去醒图APP获取验证码。*/}
            {/*            </p>*/}
            {/*            <p>*/}
            {/*                ➡️再去链接等55秒验证码。*/}
            {/*            </p>*/}
            {/*            <p>*/}
            {/*                ➡️拿到验证码请及时登录。*/}
            {/*            </p>*/}
            {/*            <p>*/}
            {/*                ⚠️验证码有效期5分钟，不用一直获取验证码。*/}
            {/*            </p>*/}
            {/*        </div>*/}
            {/*    </Tabs.Tab>*/}
            {/*    <Tabs.Tab title='视频教程' key='vegetables'>*/}
            {/*        <div>*/}
            {/*            <h3>剪映</h3>*/}
            {/*            <video src={jianying} controls width={"100%"} height={400}></video>*/}
            {/*            <h3>醒图</h3>*/}
            {/*            <video src={xingtu} controls width={"100%"} height={400}></video>*/}
            {/*        </div>*/}
            {/*    </Tabs.Tab>*/}

            {/*</Tabs>*/}
            <div className={s.columnGap20}>
                <p>
                    ➡️打开连接，复制发货信息的卡号，
                </p>
                <p>
                    ➡️输入卡号后登录，
                </p>
                <p>
                    ➡️复制手机号去APP获取验证码。
                </p>
                <p>
                    ➡️再去链接等55秒验证码。
                </p>
                <p>
                    ➡️拿到验证码请及时登录。
                </p>
                <p>
                    ⚠️验证码有效期5分钟，不用一直获取验证码。
                </p>
            </div>
            有问题请及时联系客服，客服在线时间9:30-23:00
            {/*<h2>问题助手</h2>*/}
            {/*<Collapse items={items} defaultActiveKey={['1']} />*/}
            {/*<ImageViewer*/}
            {/*    image={helpImg}*/}
            {/*    visible={visible}*/}
            {/*    onClose={() => {*/}
            {/*        setVisible(false)*/}
            {/*    }}*/}
            {/*/>*/}
        </div>
    );
}

export default Help;